import React, { useState } from 'react';
import { Card, Tabs, Form, Input, Button, Avatar, Upload, message, Row, Col } from 'antd';
import { UserOutlined, UploadOutlined } from '@ant-design/icons';
import HomeLayout from './HomeLayout'
import { UserService, type UpdateUserProfileInput } from './api/rbac/userService';

const { TabPane } = Tabs;

const ProfileSettings = () => {
  const [form] = Form.useForm();
  const [avatar, setAvatar] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState('profile');
const [loading, setLoading] = useState(false);
  const model:UpdateUserProfileInput = {
      surname:'初学者学生',
      avatar:'',
      introduction:'编程初学者，刚开始接触编程',
       email: 'beginner@test.com',
  }

  const handleTabChange = (key: string) => {
    setActiveTab(key);
  };

  const handleAvatarChange = (info: any) => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 头像上传成功`);
      setAvatar(URL.createObjectURL(info.file.originFileObj));
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 头像上传失败`);
    }
  };

  const onFinish = (values: any) => {
    console.log('提交的数据:', values,model);
    setLoading(true)
    UserService.updateProfile(values).then(()=>{
         message.success('个人资料更新成功');
    }).finally(()=>{
      setLoading(false)
    })
   
  };

  return (
    <HomeLayout>
      <div style={{ padding: '24px', margin: '0 auto' }}>
        <Card>
          <Tabs activeKey={activeTab} onChange={handleTabChange}>
            <TabPane tab="个人资料" key="profile">
              <div style={{ marginTop: '24px' }}>
                <div style={{ textAlign: 'left', marginBottom: '24px' }}>
                  <Upload
                    name="avatar"
                    showUploadList={false}
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    onChange={handleAvatarChange}
                  >
                    <Avatar
                      size={128}
                      icon={<UserOutlined />}
                      src={avatar}
                      style={{ cursor: 'pointer' }}
                    />
                  </Upload>
                  {/* <div style={{ marginTop: '12px' }}>
                  <Button icon={<UploadOutlined />}>更改头像</Button>
                </div> */}
                </div>

                <Form
                  form={form}
                  layout="vertical"
                  initialValues={model}
                  onFinish={onFinish}
                >
                  <Row gutter={16}>
                    <Col span={12}>
                      <Form.Item
                        label="姓名"
                        name="surname"
                        rules={[{ required: true, message: '请输入您的姓名' }]}
                      >
                        <Input value={model.surname} />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item
                        label="邮箱"
                        name="email"
                        extra="邮箱地址不可更改"
                      >
                        <Input disabled />
                      </Form.Item>
                    </Col>
                  </Row>




                  <Form.Item
                    label="个人简介"
                    name="introduction"
                  >
                    <Input.TextArea value={model.introduction} rows={4} />
                  </Form.Item>

                  <Form.Item>
                    <Button loading={loading} type="primary" htmlType="submit">
                      保存更改
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </TabPane>
            <TabPane tab="学习偏好" key="preferences">
              <div style={{ padding: '24px 0', textAlign: 'center' }}>
                <p>学习偏好设置内容</p>
              </div>
            </TabPane>
            <TabPane tab="安全设置" key="security">
              <div style={{ padding: '24px 0', textAlign: 'center' }}>
                <p>安全设置内容</p>
              </div>
            </TabPane>
          </Tabs>
        </Card>
      </div>
    </HomeLayout>
  );
};

export default ProfileSettings;
